<script setup>
import { ref, computed, onMounted } from 'vue'
import { Picture, Search } from '@element-plus/icons-vue'
import { useMediaStore } from '@/stores/mediaStore';
import { storeToRefs } from 'pinia'
const mediaStore = useMediaStore()
const {
  medias,
  pageNum,
  total,
  pageSize,
  search,
  filteredMedias
} = storeToRefs(mediaStore)

onMounted(() => {
  mediaStore.fetchMedias()
})

const images = [
  { id: 1, title: '好久不见', url: '/placeholder.svg?height=300&width=300' },
  { id: 2, title: '0419随便画画2', url: '/placeholder.svg?height=300&width=300' },
  { id: 3, title: '0419随便画画3', url: '/placeholder.svg?height=300&width=300' },
  { id: 4, title: '0419随便画画4', url: '/placeholder.svg?height=300&width=300' },
  { id: 5, title: '0419随便画画5', url: '/placeholder.svg?height=300&width=300' },
  { id: 6, title: '0419随便画画6', url: '/placeholder.svg?height=300&width=300' },
  { id: 7, title: '0419随便画画7', url: '/placeholder.svg?height=300&width=300' },
  { id: 8, title: '0419随便画画8', url: '/placeholder.svg?height=300&width=300' },
  { id: 9, title: '0419随便画画9', url: '/placeholder.svg?height=300&width=300' },
  { id: 10, title: '0419随便画画10', url: '/placeholder.svg?height=300&width=300' },
  { id: 11, title: '0419随便画画11', url: '/placeholder.svg?height=300&width=300' },
  { id: 12, title: '0419随便画画12', url: '/placeholder.svg?height=300&width=300' },
  { id: 13, title: '0419随便画画13', url: '/placeholder.svg?height=300&width=300' },
  { id: 14, title: '0419随便画画14', url: '/placeholder.svg?height=300&width=300' },
  { id: 15, title: '0419随便画画15', url: '/placeholder.svg?height=300&width=300' },
  { id: 16, title: '0419随便画画16', url: '/placeholder.svg?height=300&width=300' },
  { id: 17, title: '0419随便画画17', url: '/placeholder.svg?height=300&width=300' },
  { id: 18, title: '0419随便画画18', url: '/placeholder.svg?height=300&width=300' },
  { id: 19, title: '0419随便画画19', url: '/placeholder.svg?height=300&width=300' },
  { id: 20, title: '0419随便画画20', url: '/placeholder.svg?height=300&width=300' },
  { id: 21, title: '0419随便画画21', url: '/placeholder.svg?height=300&width=300' },
  { id: 22, title: '0419随便画画22', url: '/placeholder.svg?height=300&width=300' },
  { id: 23, title: '0419随便画画23', url: '/placeholder.svg?height=300&width=300' },
  { id: 24, title: '0419随便画画24', url: '/placeholder.svg?height=300&width=300' },
  { id: 25, title: '0419随便画画25', url: '/placeholder.svg?height=300&width=300' }
];

// 编辑和添加图片
// 定义变量，控制标题的展示
const title = ref('')
//控制抽屉是否显示
const visibleDrawer = ref(false)
//添加表单数据模型
const imgModel = ref({
  title: '',
  url: ''
})

// 清空
const clearData = () => {
  title.value = '添加图片'
  imgModel.value.title = '';
  imgModel.value.url = '';
}

//添加图片
import { mediaAddService } from '@/apis/media';
const addImg = async () => {
  // 调用接口
  let result = await mediaAddService(imgModel.value)
  ElMessage.success(result.msg ? result.msg : '添加成功')
  // 让抽屉消失
  visibleDrawer.value = false;
  // 刷新

}
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="head">
        <div class="card-header">
          图片管理
        </div> 
        <el-button type="primary" class="add-button">+添加图片</el-button>
      </div>
    </template>

    <div class="article-management">
      <!-- 搜索 -->
      <div class="search" style="border-bottom: 1px solid #eee;">
        <el-input
          v-model="search"
          placeholder="搜索图片..."
          style="width: 50vh;"
          :prefix-icon="Search"
        />
      </div>
      <el-scrollbar height="650px">
        <!-- 图片列表 -->
        <div class="image-list">
          <el-card
            v-for="image in paginatedImages"
            :key="image.id"
            class="image-card"
            :body-style="{ padding: '0px' }"
            shadow="never"
          >
            <div class="card-content">
              <el-image
                :src="image.url"
                fit="cover"
                class="gallery-image"
                loading="lazy"
              >
                <template #placeholder>
                  <div class="image-placeholder">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <div class="image-info">
                <span class="image-title">{{ image.title }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-scrollbar>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination 
          background
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[21, 42, 84]"
          :layout="'total, sizes, prev, pager, next, jumper'"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-card>
</template>

<style scoped>
.page-container {
  min-height: 86.5vh;
  box-sizing: border-box;
  margin: 10px;
}

:deep(.el-card__body) {
  height: auto;
  padding: 0;
}

.search {
  padding: 10px;
}

.article-management {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 0 auto;
}

.image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));



  .image-card {
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
    background-color: #a1a1a1;
    border: none;

    &:hover {
      transform: translateY(-5px);
    }

    .card-content {
      display: flex;
      flex-direction: column;
      height: 200px;
      position: relative;

      .gallery-image {
        aspect-ratio: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;

        .image-placeholder {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          background-color: #3c3c3c;
          color: #666;
          font-size: 24px;
        }
      }

      .image-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
      }
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: white;
  border-top: 1px solid #eee;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.card-header {
  font-size: 25px;
}
</style>

